import loadGif from '@/assets/images/load.gif'
import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = loadGif
            el.onerror = () => {
              el.src = defaultImg
            }
            setTimeout(() => {
              el.src = binding.value
            }, 1000)
            stop()
          }
        }, {
          threshold: 0
        })
      }
    })
  }
}
